//判断是否已登录
$(function () {
    if (!isLogin()) {
        $('tbody').html(' <tr><td colspan="6">你还没有登录<a href="./login.html" style="color:#ff6700;font-size:20px">点我去登录</a></td></tr>')
    }
})
//无购物车数据渲染的内容
var arrNo = ' <tr><td colspan="6">你的购物车是空的<a href="./list.html" style="color:#ff6700;font-size:20px">点我去加购</a></td></tr>'
//查看有无购物车数据
localStorage.getItem('cart')
//有数据
if (localStorage.getItem('cart')) {
    var cartArr1 = JSON.parse(localStorage.getItem('cart'))
    var ids = []
    cartArr1.forEach(v => {
        if (v.username === isLogin()) {
            ids.push(v.id)
        }
    });
    //有该用户的数据
    if (ids && ids.length != 0) {
        $.ajax({
            url: '../server/cart.php',
            data: {
                ids: ids.join()
            },
            async: false,
            dataType: 'json',
            success(res) {
                var {
                    data: cartdata
                } = res;
                let arr = '';
                //渲染商品列表
                cartdata.forEach(v => {
                    //从购物车数据中拿到商品数量
                    cartArr1.forEach(t => {
                        if (t.username === isLogin() && t.id === v.id) {
                            arr += `<tr index="${v.id}" stock="${v.stock}"><td><input class="checkbox" type="checkbox"><a href="detail.html?id=${v.id}"><img src="${v.imgpath.split("=")[0]}" alt=""></a></td>
                            <td><p>${v.name}</p></td>
                    <td><span class="price">${v.price}</span>元</td>
                    <td class="sum"><input class="reduce" type="button" value="-"><input class="num" type="text" value="${t.num}"><input class="add" type="button" value="+"></td>
                    <td><span class="sumprice">${v.price*t.num}</span>元</td>
                    <td><button>x</button></tr> `
                        }
                    });

                })
                $('tbody').html(arr)
            }
        })
    }else{
        $('tbody').html(arrNo)
    }
}else{
    $('tbody').html(arrNo)
}
//点击事件   事件委托
$('tbody>tr').click(function(e){
    e = e || even
    var target = e.target || e.srcElement; 
    //点击了勾选框
    if(target.className ==='checkbox'){
        theSum()
    }
    //点击  -  
    if(target.className === 'reduce'){
        //输入框中的数量
        let num = $(this).find('.num').val()
        //单价
        let oneprice = $(this).find('.price').html()
        if (num * 1 <= 1) {
            layer.msg("最少可购买一件商品")
        } else {
            $(this).find('.num').val(num - 1)
            num = $(this).find('.num').val()
            $(this).find('.sumprice').html(num * oneprice)
            theSum()
            goodsNum.call(this)
        }
    }
    //点击  + 
    if(target.className === 'add'){
        //获取 储存在 tr 属性中的库存 
        let stock = $(this).attr('stock')
        let num = $(this).find('.num').val()
        let oneprice = $(this).find('.price').html()
        if ($(this).find('.num').val() * 1 + 1 > stock) {
                    layer.msg("超出库存")
                } else {
                    $(this).find('.num').val(num- 0 + 1)
                    num = $(this).find('.num').val()
                    $(this).find('.sumprice').html(num * oneprice)
                    theSum()
                    goodsNum.call(this)
                }
    }
    //点击 删除
    if(target.localName === 'button'){
        let index = $(this).attr('index')
        $(this).remove()
        theSum()
        $('thead input').prop('checked',false)
        let cartArr = JSON.parse(localStorage.getItem('cart'))
        cartArr.forEach((v,i,arr)=>{
            if(v.id == index && v.username == isLogin()){
                arr.splice(i,1)
            }
        })
        layer.msg('删除成功')
        localStorage.setItem("cart", JSON.stringify(cartArr))
    }
})
// 输入数量
$('.num').on('blur', function () {
    //数量
    let num = $(this).val()
    //单价
    let oneprice = $(this).parent().parent().find('.price').html()
    //库存
    let stock = $(this).parent().parent().attr('stock')
    if (num * 1 <= 0) {
        $(this).val(1)
        layer.msg("最少可购买一件商品")
        num = $(this).val()
        $(this).parent().parent().find('.sumprice').html(num * oneprice)
        theSum()
        goodsNum.call(this)

    }
    if (num * 1 > stock) {
        $(this).val(stock)
        layer.msg("超出库存")
        num = $(this).val()
        $(this).parent().parent().find('.sumprice').html(num * oneprice)
        theSum()
        goodsNum.call(this)

    } else {
        $(this).parent().parent().find('.sumprice').html(num * oneprice)
        theSum()
        goodsNum.call(this)
    }
})


//点击 全选
$('thead input').click(function(){
    let checked = $(this).prop('checked')
    if(ids.length == 0){
        layer.msg('购物车中还没有商品')
    }
    if(checked){
        $('tbody .checkbox').prop('checked',true)
        theSum()
        $('tbody .checkbox').click(()=>{
            $(this).prop('checked',false)
            theSum()
        })
    }else{
        $('tbody .checkbox').prop('checked',false)
        theSum()
    }
})
//定义一个改变数据库中商品数量的函数
function goodsNum(){
         //this 指向 变为tr
        //改变的数量
        let cartArr = JSON.parse(localStorage.getItem('cart'))
        cartArr.forEach(v=>{
            if(v.id == $(this).attr('index') && v.username == isLogin()){
                v.num = $(this).find('.num').val()
            }
        })
        localStorage.setItem("cart", JSON.stringify(cartArr))
}
//定义一个计算已选件数  和 总计的
function theSum(){
    let numall = 0;
    let priceall = 0;
    let bool = true;
    $('tbody .checkbox').each(function(i,v){
        if($(v).prop('checked')){
            numall += $(v).parent().parent().find('.num').val()*1
            priceall += $(v).parent().parent().find('.sumprice').html()*1
        }else{
            bool = false
        }
    })
    $('.pay p span').html(numall)
    $('.pay .money span').html(priceall)
    //如果 全部勾选 全选框也勾选
    if(bool&&ids.length !=0){
        $('thead input').prop('checked',true)
    }else{
        $('thead input').prop('checked',false)
    }
}


